<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import headerNavBar from '@/components/headerNavBar.vue';
import slideTabs from './components/slideTabs.vue';
import listItem from './components/listItem.vue';
import { useNavBarHeight } from '@/composables/useNavBarHeight';
import { useLargenScreen } from '@/composables/useLargenScreen';
import { useToastLoading } from '@/composables/useToastLoading';
import { useRouter } from 'vue-router';
import { shequIndex, shequRank } from '@/common/api/pledgeReward';
import type { OnPage } from '@/composables/useList';
import { useList } from '@/composables/useList';
import {showDialog, showToast} from 'vant';
import bg1 from '@/assets/images/pledgeReward/bg_1.png';
import ico1 from '@/assets/images/pledgeReward/ico_1.png';
import zhiyaDialog from './components/zhiyaDialog.vue';
import type { Item } from './types';
import { isEmpty } from 'lodash-es';

const zhiyaDialogRef = shallowRef<InstanceType<typeof zhiyaDialog>>();

const router = useRouter();
const { navBarHeight } = useNavBarHeight();
// 监听浏览器窗口变化
const [largenScreen] = useLargenScreen();

const indexLoading = ref(false);
const rtype = ref(1); // 活动tab
const ptype = ref(1); // 选中时期
const info = ref<any>({});
const myItem = ref<null | Item>(null);
const dataTotal = ref('');
const tabsOptions = ref<null | { tab1: string[]; tab2: string[]; tab3: string[]; tab4: string[] }>(null);

//当前末位质押数量
let data3 = ref<any>({});
const server: OnPage = async (listConfig) => {
  const res = await shequRank({ ...listConfig, rtype: rtype.value, ptype: ptype.value });
  const { list, data, data2 } = res.result;
  //判断res.result.data3是否为空
  if(!isEmpty(res.result.data3)){
      data3 =res.result.data3;
  }

  if(!isEmpty(data)){
    myItem.value = isEmpty(data) ? null : data[0];
  }
  dataTotal.value = data2?.total || '';
  // console.log('goodList: ', list);
  return list;
};

const { list, loading, finished, error, refreshing, onLoad, onRefresh } = useList(server);

const handleClickRight = () => {
  router.push('/transferDetails');
};

const getValue = (obj: Object | undefined, more = false) => {
  if (!obj) {
    return ['-', '-'];
  }
  return more ? Object.entries(obj) : Object.entries(obj)[0];
};

// 首页数据
const onIndexLoad = async () => {
  indexLoading.value = true;
  try {
    const res = await shequIndex({});
    info.value = res.result.data;
    if (res.result.data.seg3) {
      tabsOptions.value = res.result.data.seg3;
    }
  } catch {
    /** empty */
  } finally {
    indexLoading.value = false;
  }
};
onIndexLoad();
useToastLoading(indexLoading);


const  positioning=() =>{
  showToast(`${myItem.value?.rank}`);
  //根据索引算出当前是在第几页
  const page = Math.floor(myItem.value?.rank! / 10);
  showToast("第"+page+"页");
  //请求接口从第page页开始 修改listConfig

};
const refreshPage = () => {
  onRefresh();
  onIndexLoad();
};

// 活动规则
const showTip = () => {
  showDialog({
    title: info.value.seg2.tip2,
    message: info.value.seg2.rules.join('\n'),
  });
};
</script>
<template>
  <div
    class="pledgeReward bg-[length:100%_auto] bg-no-repeat scroll-hidden"
    :class="{ boxShadow: largenScreen }"
    :style="{ backgroundImage: `url(${bg1})`, paddingTop: `${navBarHeight}px` }"
  >
    <headerNavBar
      rightText="转入明细"
      scroll-el=".pledgeReward"
      :placeholder="false"
      transparent
      @on-click-right="handleClickRight"
    />
    <van-config-provider :theme-vars="{ pullRefreshHeadTextColor: 'white' }">
      <van-pull-refresh v-model="refreshing" @refresh="refreshPage">
        <template #loading>
          <div class="text-white flex items-center justify-center">
            <van-loading type="spinner" color="#ffffff" size="16" />
            <span class="ml-1">加载中...</span>
          </div>
        </template>
        <!-- 顶部统计 -->
        <div class="w-full">
          <div class="bg-white mx-3 rounded-lg mt-4 flex flex-col relative">
            <div class="flex items-center pt-4 px-3">
              <van-image width="16" height="16" :src="ico1" />
              <span class="text-xs ml-1">{{ getValue(info?.seg1?.[0])[0] }}</span>
            </div>
            <div class="text-2xl md:text-3xl px-3 mt-2">{{ getValue(info?.seg1?.[0])[1] }}</div>
            <div class="flex items-center flex-1 px-3 mt-4 mb-2">
              <div class="text-left w-1/3">
                <div class="text-xs text-[#7A7A7A]">{{ getValue(info?.seg1?.[1])[0] }}</div>
                <div class="text-base md:text-lg">{{ getValue(info?.seg1?.[1])[1] }}</div>
              </div>
              <div class="text-center w-1/3">
                <div class="text-xs text-[#7A7A7A]">{{ getValue(info?.seg1?.[2])[0] }}</div>
                <div class="text-base md:text-lg">{{ getValue(info?.seg1?.[2])[1] }}</div>
              </div>
              <!-- <div class="text-center">
                <div class="text-xs text-[#7A7A7A]">{{ getValue(info?.seg1?.[5])[0] }}</div>
                <div class="text-base md:text-lg">{{ getValue(info?.seg1?.[5])[1] }}</div>
              </div> -->
            </div>
            <div class="text-xs text-[#999999] absolute right-2 top-2" v-if="info?.seg2?.tip2" @click="showTip">
              {{ info.seg2.tip2 }}
            </div>
            <div
              class="absolute right-0 top-12 leading-8 text-center text-white text-sm bg-gradient-to-r from-[#FF656C] to-[#FF3474] pl-4 pr-3 rounded-l-full van-haptics-feedback"
              @click="zhiyaDialogRef?.open()"
            >
              去转入
            </div>
          </div>
        </div>
        <div class="bg-white mx-3 rounded-lg mt-3 pb-5 overflow-hidden">
          <div class="border-b border-[#eaeaea] pt-2" v-if="tabsOptions?.tab1">
            <van-tabs
              v-model:active="rtype"
              @change="onRefresh(true)"
              color="#EC2D69"
              title-active-color="#EC2D69"
              line-width="20px"
              line-height="4px"
            >
              <van-tab :title="text" :name="index + 1" v-for="(text, index) in tabsOptions.tab1" :key="index"></van-tab>
            </van-tabs>
          </div>
          <div class="flex items-center justify-center px-3 pt-5 text-center">
            <div>
              <div class="text-xs text-[#7A7A7A]">
                {{ getValue(tabsOptions?.tab4[rtype - 1], true)?.[0]?.[0] ?? '-' }}
              </div>
              <div class="text-lg md:text-xl text-[#EC2D69]">
                {{ getValue(tabsOptions?.tab4[rtype - 1], true)?.[0]?.[1] ?? '-' }}
              </div>
            </div>
            <div class="mr-6 ml-6">
              <div class="text-xs text-[#7A7A7A]">
                {{ getValue(tabsOptions?.tab4[rtype - 1], true)?.[1]?.[0] ?? '-' }}
              </div>
              <div class="text-lg md:text-xl">{{ getValue(tabsOptions?.tab4[rtype - 1], true)?.[1]?.[1] ?? '-' }}</div>
            </div>

            <div>
              <div class="text-xs text-[#7A7A7A]">
                当前末位质押数量
              </div>
              <div class="text-lg md:text-xl text-[#FF8E47]">{{ data3.price }}</div>
            </div>


          </div>
          <van-list
            v-model:loading="loading"
            v-model:error="error"
            :finished="finished"
            finished-text="没有更多了"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
          >
            <div class="pt-4 px-7 mb-6" v-if="tabsOptions">
              <slideTabs
                v-model="ptype"
                :tabs-options="tabsOptions"
                :dataTotal="dataTotal"
                @on-change="onRefresh(true)"
              />
            </div>
            <div class="px-3 pb-2" v-if="myItem">
              <listItem isMy :rtype="rtype" :ranking="myItem.rank" :item="myItem" />
            </div>
            <div class="border-t border-[#EAEAEA]">
              <div class="flex justify-between items-center text-[#7A7A7A] text-xs p-3">
                <span>{{ info?.seg3?.tab5?.[rtype - 1] || '-' }}</span>
                <span>{{ rtype === 1 ? '转入' : '区域' }}总量</span>
              </div>
              <div class="px-3">
                <listItem :ranking="i + 1" :rtype="rtype" v-for="(item, i) in list" :item="item" :key="item.uid" />
              </div>
            </div>
          </van-list>
<!--          <van-floating-bubble class="custom-bubble" v-if="myItem"  :gap="10" icon="chat" @click="positioning" />-->
          <van-back-top right="15vw" bottom="10vh" />
        </div>
        <!-- 底部安全区 -->
        <div class="van-safe-area-bottom"></div>
      </van-pull-refresh>
    </van-config-provider>

    <!-- 转入弹窗 -->
    <zhiyaDialog :info="info" @refresh="refreshPage" ref="zhiyaDialogRef" />
  </div>
</template>
<style lang="less" scoped>
.pledgeReward {
  overflow-y: auto;
  background-color: #f6f6f6;
  height: 100vh;
  max-width: 450px;
  padding-bottom: 20px;
  :deep(.van-tab--active .van-tab__text) {
    font-size: 16px;
  }
}
.pledgeReward.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.custom-bubble .van-icon {
  font-size: 20px; /* 设置图标的大小 */
}

</style>
